<script setup lang="ts">

const loading = ref(false);

const finished = ref(false);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

const total = ref(0);

let listArr = [];

function refresh() {
  console.log('refresh', '刷新');
  finished.value = false;
  listArr = [];
  handleQuery()
}

async function getList() {
  console.log('getList', '加载更多');
  // const response = await getData();
  try {
    loading.value = true;
    const response = await getData();

    response.rows.forEach((item, index) => {
      item.colNo = sequenceNo(index, queryParams.value);
    });

    listArr = [...listArr, ...response.rows];
    total.value = response.total;

    if (listArr.length >= total.value) {
      finished.value = true;
    }
    queryParams.value.pageNum++;
  } finally {
    loading.value = false;
  }

}

function getData() {
  let res = {
    code: 200,
    rows: [
      { id: 1, name: '名字1' },
      { id: 2, name: '名字2' },
      { id: 3, name: '名字3' },
      { id: 4, name: '名字4' },
      { id: 5, name: '名字5' },
      { id: 6, name: '名字6' },
      { id: 7, name: '名字7' },
      { id: 8, name: '名字8' },
      { id: 9, name: '名字9' },
      { id: 10, name: '名字10' },
      { id: 11, name: '名字11' },
      { id: 12, name: '名字12' },
      { id: 13, name: '名字13' },
      { id: 14, name: '名字14' },
      { id: 15, name: '名字15' },
      { id: 16, name: '名字16' },
      { id: 17, name: '名字17' },
      { id: 18, name: '名字18' },
      { id: 19, name: '名字19' },
      { id: 20, name: '名字20' },
    ],
    total: 60,
  }
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(res);
    }, 2000);
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
</script>

<template>
<div class="app-container">
  <refresher-view
      @refresher="refresh"
      :loading="loading"
      :finished="finished"
      @load="getList"
  >
    <div class="content-box">
      <div class="list-item" v-for="item in listArr" :key="item.id">
        {{ item.colNo }} {{ item.id }} -- {{ item.name }}
      </div>
    </div>
  </refresher-view>
</div>
</template>

<style scoped lang="scss">
.app-container {
  height: 100%;
  overflow: auto;

  .content-box {
    .list-item {
      height: 40px;
      text-align: center;
    }
  }
}
</style>